<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>24canvas方向控制的小人</title>
</head>
<style>
    canvas {
        border: 1px solid #ccc;
        display: block;
        margin: 0px auto;
    }
</style>
<body>
<canvas width="800" height="800"></canvas>
<script>
    var myCanvas = document.querySelector('canvas');
    var ctx = myCanvas.getContext('2d');
    var Person = function (ctx) {
        /*绘制工具*/
        this.ctx = ctx || document.querySelector('canvas').getContext('2d');
        /*图片路径*/
        this.src = 'image/zdh.jpg';
        /*画布的大小*/
        this.canvasWidth = this.ctx.canvas.width;
        this.canvasHeight = this.ctx.canvas.height;
        /*行走相关参数*/
        this.stepSize = 4;
        /*0是前 1是左 2是右 3是后 和图片的行数包含的图片对应上*/
        this.direction = 0;
        /*x轴方向的偏移步数*/
        this.stepX = 0;
        /*y轴方向的偏移步数*/
        this.stepY = 0;
        /*初始化方法*/
        this.init();
    };
    Person.prototype.init = function () {
        var that = this;
        /*1.加载图片*/
        this.loadImage(function (image) {
            /*图片的大小*/
            that.imageWidth = image.width;
            that.imageHeight = image.height;
            /*人物的大小*/
            that.personWidth = that.imageWidth / 8;
            that.personHeight = that.imageHeight / 4;
            /*绘制图片的起点*/
            that.x0 = (that.canvasWidth - that.personWidth) / 2;
            that.y0 = (that.canvasHeight - that.personHeight) / 2;
            /*2.默认绘制在中心位置正面朝外*/
            /*3.能通过方向键去控制人物行走*/
            that.index = 0;
            that.ctx.drawImage(image,
                that.index * that.personWidth, that.direction * that.personHeight,
                that.personWidth, that.personHeight,
                that.x0 + that.stepX * that.stepSize, that.y0 + that.stepY * that.stepSize,
                that.personWidth, that.personHeight);
            document.onkeydown = function (e) {
                /* console.log(e.key);*/
                if (e.key === 'ArrowDown') {
                    that.stepY++;
                    that.direction = 0;
                    that.drawImage(image);
                }
                if (e.key === 'ArrowLeft') {
                    that.stepX--;
                    that.direction = 1;
                    that.drawImage(image);
                }
                if (e.key === 'ArrowRight') {
                    that.stepX++;
                    that.direction = 2;
                    that.drawImage(image);
                }
                if (e.key === 'ArrowUp') {
                    that.stepY--;
                    that.direction = 3;
                    that.drawImage(image);
                }
            };
        });
    };

    /*绘制图片*/
    Person.prototype.drawImage = function (image) {
        this.index++;
        /*清除画布*/
        // this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
        /* 9参数 img对象
         * 图片上定位的坐标 x y
         * 在图片上截取多大的区域 w h
         * 绘制在画布上的坐标
         * 图片的大小（不是裁剪 是缩放）
         * */
        /*绘图*/
        /*在精灵图上的定位X，索引来确定*/
        /*在精灵图上的定位Y, 根据方向键来确定*/
        this.ctx.drawImage(image,
            this.index * this.personWidth, this.direction * this.personHeight,
            this.personWidth, this.personHeight,
            this.x0 + this.stepX * this.stepSize, this.y0 + this.stepY * this.stepSize,
            this.personWidth, this.personHeight);
        /*如果索引超出 变成0*/
        if (this.index > 7) {
            this.index = 0;

        }
    };
    /*加载图片*/
    Person.prototype.loadImage = function (callback) {
        var image = new Image();

        image.onload = function () {
            callback && callback(image)
        };
        image.src = this.src;
    };
    new Person();
</script>
</body>
</html>
